<template>
  <view>
	<view class="cu-bar tabbar bg-white">
		<view class="action">
			<view class="cuIcon-cu-image">
				<image src="/static/tabbar/basics_cur.png"></image>
			</view>
			<view class="text-green">首页</view>
		</view>
		<view class="action">
			<view class="cuIcon-cu-image">
				<image src="/static/tabbar/component.png"></image>
			</view>
			<view class="text-gray">大厅</view>
		</view>
		<view class="action">
			<view class="cuIcon-cu-image">
				<image src="/static/tabbar/plugin.png"></image>
				<view class="cu-tag badge">99</view>
			</view>
			<view class="text-gray">信息</view>
		</view>
		<view class="action">
			<view class="cuIcon-cu-image">
				<image src="/static/tabbar/about.png"></image>
				<view class="cu-tag badge"></view>
			</view>
			<view class="text-gray">我的</view>
		</view>
	</view>
  </view>
</template>

<script>
  export default {
    components: {},
    mounted() {
      // 采用自定义tabbar，需首先隐藏原生tabbar。
      uni.hideTabBar()
    },
    data() {
      return {}
    },
    methods: {
      handlePageCur(pageCur) {
        this.$u.vuex('vuex_PageCur', pageCur)
      },
      NavChange: function(e) {
        this.handlePageCur(e.currentTarget.dataset.curbar)

        // tabar页面跳转需用switchTab方式，启用pages.json相关tabbar设置。
        uni.switchTab({
            url: e.currentTarget.dataset.cur
        });
      },
      navTo(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.cur
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-action {
    height: 42px !important;

    .cuIcon-cu-image {
      height: 30px !important;
      padding-top: 3px;

      .cuIcon-edit {
        font-size: 22px;
        margin-bottom: 0px;
      }
    }
  }

  .my-add-action {
    padding-top: 4px;
  }
</style>
